<div class="cover media">
  <div class="content-body content-body-layer">
    <a href="" class="icon-close1 fr"  ng-click="closeShow()"><i class="iconfont bigSize">&#xe608;</i></a>
    <div class="content-title">
      <h2 class="text-title">选择场景包</h2>
    </div>
    <!--查询 -->
    <div class="coverSearch">
      <span class="fl"><input type="text" class="searchSceneP" placeholder="场景包" ng-model="scenesName"></span>
      <span class="ScenePbtn btn-warning cursor"  ng-click="queryPackInterface()">查询</span>
    </div>
    <p class="MB30 MT20 coverTxt">*场景包：是针对某个特定主题，精心组合而成的广告位资源包，我们将面向访问这些广告位所在页面、符合定向属性的用户群体投放广告。</p>
    <!-- table -->
    <div class="chooseTitle">
      <span class="width55">选择场景包</span>
      <span>已选择</span>
    </div>
    <div class="chooseTable">
      <div class="table">
        <div class="tableTitle">
          <span>类型</span>
          <span>场景包名称</span>
        </div>
        <ul class="tableContent" id="top">
          <li ng-repeat="item in displayList">
            <span class="width30">{{item.scenesType=='2'?'自定义':'公共'}}</span>
            <span class="width50">{{item.scenesName}}</span>
            <span class="textR width10">
              <div class="fCheckBox">
                <input type="checkbox" disabled id="{{'checkbox'+$index}}" ng-model="item.isChecked">
                <label class="" for="{{'checkbox'+$index}}" ng-click='changePackage(item)'>
                </label>
              </div>
            </span>

          </li>
        </ul>
      </div>
      <div class="chosen">
        <ul>
          <li ng-repeat="item in showAdsList">
            <span>{{item.slotName}}</span>
            <em class="fr" ng-click="deleteAds(item,$index)"><i class="iconfont cursor font12">&#xe73e;</i></em>
          </li>
        </ul>
      </div>
    </div>
    <div class="textC MT50">
      <button class="btn btn-radius btn-warning-border btn-lg big-button" ng-click="closeShow()">取消</button>
      <button class="btn-radius sceneBack btn-lg big-button" ng-click="chooseList()">确认</button>
    </div>
  </div>
</div>
<style>
  .media .content-body-layer {
    width: 1220px;
    min-height: 75%;
    height: 730px;
    overflow-y: auto;
    position: absolute;
    box-sizing: border-box;
    padding: 20px 30px;
    position: absolute;
    left:50%;
    top:50%;
    transform: translate(-50% ,-50%);
    -webkit-transform: translate(-50%, -50%);
  }
  .media .chosen{
    border: 1px solid #d3d3d3;
    display: inline-block;
    width: 45%;
    vertical-align: top;
    padding: 10px;
    margin-top: 20px;
    margin-left: 30px;
    height: 300px;
    overflow-y: auto;
  }
  .media .chooseTable{
    text-align: justify;
  }
  .media .chosen li{
    /* border: 1px solid #d3d3d3; */
    padding: 5px;
    margin-top: 10px;
  }
  .media .searchSceneP{
    width: 374px;
    height:42px;
  }
  .media .coverTxt{
    color: #d3d3d3;
    font-size: 14px;
  }
  .media .ScenePbtn{
    width: 100px;
    height:42px;
    border-color: #ffb135;
    border: 0;
    font-size: 14px;
    text-align: center;
    line-height: 42px;
  }
  .media .chooseTitle span{
    color: #393d40;
    font-size: 14px;
  }
  .media .sceneBack{
    color: #fff;
    background: #ffb135;
    border: 0;
    font-size: 14px;
    box-sizing: border-box;
    margin-left: 20px;
  }
  .media .btn-lg{
    padding: 12px 50px;
    font-size: 14px;
  }
  .media .fCheckBox{
    width: 40px;
    margin-bottom: 0;
  }

  .media .table{
    width:50%;
    height:300px;
    border:1px solid #d2d2d2;
    overflow: hidden;
    display: inline-block;
    margin: 20px 0 0 0px;
  }
  .media .tableTitle{
    height: 50px;
    background-color: #f2f4f6;
    line-height: 50px;
    text-align: left;
    border-bottom: 1px solid #d2d2d2;
  }
  .media .tableTitle span{
    width:29%;
    display: inline-block;
    padding-left: 10px;
  }
  .media .tableContent{
    overflow-y: auto;
    max-height: 248px;
  }
  .media .tableContent li{
    height:50px;
    line-height: 50px;
    padding-left: 10px;
  }
  .media .tableContent li span {
    display: inline-block;
  }
</style>